<template>
  <PageListContainer>
    <div class="base-block">
      <el-tabs v-model="state.params.sales_order_type" @tab-change="handleTabChange">
        <el-tab-pane label="跟进订单" :name="0"></el-tab-pane>
        <el-tab-pane label="非跟进订单" :name="1"></el-tab-pane>
      </el-tabs>
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="用户搜索" prop="keyword">
          <el-input v-model="state.params.keyword" placeholder="请输入昵称、手机号" clearable />
        </el-form-item>

        <el-form-item label="购买类型" prop="product_title">
          <el-input v-model="state.params.product_title" placeholder="请输入购买类型" clearable />
        </el-form-item>

        <el-form-item label="支付时间" prop="keyword">
          <el-date-picker
            v-model="state.params._timeArr"
            clearable
            value-format="YYYYMMDD"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>

        <el-form-item label="跟进人" prop="sales_id">
          <el-select v-model="state.params.sales_id" placeholder="请选择跟进人">
            <el-option v-for="item in salesUserList" :key="item.sales_id" :label="item.sales_name" :value="item.sales_id" />
          </el-select>
        </el-form-item>

        <el-form-item label="优惠类型">
          <el-select v-model="state.params.discount_type" placeholder="请选择优惠类型">
            <el-option v-for="item in discountsTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="state.params.sales_order_type === 1" label="订单类型">
          <el-select v-model="state.params.order_type" placeholder="请选择订单类型">
            <el-option v-for="item in orderTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="state.params.sales_order_type === 0" label="线索类型">
          <el-select v-model="state.params.sales_user_type" placeholder="请选择线索类型">
            <el-option v-for="item in clueTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <k-toolbar>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </k-toolbar>
      <k-table v-if="toggleTable" v-bind="tableState" :columns="toggledColumns" v-on="tableEvent" />
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue';
import { Download } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash-es';

import { useTableList, orderTypeOptions, clueTypeOptions, discountsTypeOptions } from './hooks/use-table';
import { getSalesUserList } from '@/api/crm-kgj/sales';
import { exportSalesOrder } from '@/api/crm-kgj/download';

import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';
import { AuthCode, hasPermission } from '@/modules/auth';
defineOptions({
  name: 'KgjSalesOrderManage'
});
const { state, tableState, tableEvent, ...methods } = useTableList({});

const toggleTable = ref(true);
const toggledColumns = computed(() => {
  const currentColumns = cloneDeep(tableState.value.columns);
  currentColumns.splice(state.params.sales_order_type === 0 ? 7 : 8, 1);
  return currentColumns;
});

const salesUserList = ref<any>([{ sales_id: '', sales_name: '全部' }]);

/** 导出数据 */
const onClickExportData = async () => {
  if (hasPermission(AuthCode.KGJ_SALES_LIST)) {
    const res = await exportSalesOrder(methods.getParams(state.params).data);
    if (res.err) return;
  }
};

const getSalseUsers = async () => {
  const res = await getSalesUserList({ data: {}, params: { page: 1, limit: 500 } });
  if (res.err) return;
  salesUserList.value = salesUserList.value.concat(res.data?.items);
};

/** 当tab切换时，重置默认值并请求查询接口 */
const handleTabChange = () => {
  state.params.order_type = -1;
  state.params.sales_user_type = -1;
  methods.onSearch();
};
onMounted(() => {
  if (hasPermission(AuthCode.KGJ_SALES_LIST, false)) {
    getSalseUsers();
  }
});
</script>
